<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { link as linkData } from "../../../utils/ts/link";
import { calMenuChosen } from "../../Console/Menu/Menu";
import { indexMenuList } from "../Menu/Index";
import { useRoute, } from "vue-router";

const chosen = ref(0);
const link = ref(linkData);

const updateMenu = () => {
  const hash = location.hash.split("/")[2];
  const res = calMenuChosen(
    indexMenuList.map((val) => ({ name: val.name, hidden: val.hidden })),
    hash
  );
  if (res > -1) chosen.value = res;
  else if (hash === undefined) chosen.value = 0;
};

const route = useRoute();

watch(() => route.path, () => {
  updateMenu();
})
onMounted(() => {
  updateMenu();
});

// onUnmounted(() => {
//   window.removeEventListener("hashchange", updateMenu);
// });
</script>
<template>
  <header>
    <div class="top">
      禁止将堡塔产品用于含诈骗、赌博、色情、木马、病毒等违法违规业务，堡塔公司将对违规使用者封停其账号，以及停止服务器IP安装和更新堡塔产品等服务。
    </div>
    <nav>
      <div class="navBox">
        <div class="left">
          <a href="#" id="logo">
            <img src="/index/logo.svg" alt="" />
          </a>
          <ul>
            <li v-for="(item, index) in link" :key="index" :class="index === chosen ? 'active' : ''">
              <span>
                <router-link :to="item.link" :class="item.children ? 'children' : ''" @click="chosen = index">
                  {{ item.name }}
                </router-link>
                <!-- <a
                  :href="item.link"
                  :class="item.children ? 'children' : ''"
                  @click="chosen = index"
                >
                  {{ item.name }}
                </a> -->
                <div class="childrenItem" v-if="item.children">
                  <router-link :to="child.link" :key="index" v-for="(child, index) in item.children">
                    <div class="title">
                      <div class="childTop">{{ child.name }}</div>
                      <div class="childBot">{{ child.desc }}</div>
                    </div>
                  </router-link>
                </div>
              </span>
            </li>
          </ul>
        </div>

        <div class="buttonGroup">
          <a href="#/login"><button>登录</button></a>
          <a href="#/register"><button>免费注册</button></a>
        </div>
      </div>
    </nav>
  </header>
</template>
<style lang="scss" scoped>
@import "../../../utils/scss/global.scss";

header {
  background: #fff;
  z-index: 9999;
}

.top {
  width: 100%;
  height: 40px;
  font-size: 14px;
  background-color: #fcf4e4;
  color: #d98704;
  overflow: hidden;
  padding: 10px 20px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

@media only screen and (max-width: 950px) {
  .top {
    display: none;
  }
}

nav {
  width: 100%;
  height: 90px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;

  .navBox {
    width: $center;
    height: 100%;
    display: flex;
    align-items: center;

    .left {
      display: flex;
      align-items: center;
      width: 1136px;
      height: 100%;

      #logo {
        $w: 104px;
        $h: 56px;
        width: $w;
        height: $h;
        margin-right: 75px;

        img {
          width: $w;
          height: $h;
        }
      }

      ul {
        display: flex;
        height: 100%;
        margin-bottom: 0;

        .active>span>a {
          color: #20a53a;
          font-weight: 600;
          border-bottom: 2px solid #20a53a;
        }

        li {
          height: 100%;

          span {
            // display: block;
            display: flex;
            align-items: center;
            line-height: 48px;
            height: 100%;
            margin-right: 50px;
            position: relative;

            &>a {
              display: block;
              height: 50px;
              color: #333;
              font-size: 18px;

              &:hover {
                color: #20a53a;
                font-weight: 600;
              }
            }

            &:hover .childrenItem {
              opacity: 1;
              visibility: visible;
              margin-top: 0;
            }

            .childrenItem {
              z-index: 9;
              position: absolute;
              left: 50%;
              top: 100%;
              padding: 8px 0;
              background: #fff;
              width: 200px;
              margin-left: -95px;
              opacity: 0;
              visibility: hidden;
              margin-top: 20px;
              transition: 0.25s;
              box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
              border-radius: 4px;

              &::after {
                content: "";
                top: -10px;
                position: absolute;
                left: 80px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #fff;
              }

              a {
                display: flex;
                align-items: center;
                height: 55px;
                padding: 0 20px;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                color: #666;
                font-size: 14px;

                &:hover {
                  background-color: #def1e0;

                  .title {

                    .childTop,
                    .childBot {
                      color: #20a53a;
                    }
                  }
                }

                .title {
                  position: relative;

                  div {
                    transition: all 0.3s;
                  }

                  .childTop {
                    $text: 15px;
                    font-size: $text;
                    line-height: normal;
                    color: #555;
                    font-weight: 600;
                    margin-bottom: 3px;
                  }

                  .childBot {
                    $text: 12px;
                    font-size: $text;
                    line-height: normal;
                    color: #999;
                  }
                }
              }
            }

            .children::after {
              content: "";
              position: relative;
              top: -5.5px;
              display: inline-block;
              width: 0;
              height: 0;
              margin-left: 10px;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              border-top: 5px solid #333;
              transition: all 0.25s;
            }
          }
        }
      }
    }

    .buttonGroup {
      display: flex;
      background: transparent;
      border: 0;

      a:nth-of-type(1) {
        margin-right: 12px;

        &:hover {
          button {
            color: #fff;
            background-color: #20a53a;
          }
        }
      }

      a:nth-of-type(2) {
        button {
          color: #fff;
          background-color: #20a53a;
        }
      }

      a {
        $height: 39px;
        height: $height;
        width: 120px;
        display: inline-block;
        margin-left: 12px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #20a53a;
        border-radius: 4px;

        button {
          width: 100%;
          border-radius: 4px;
          transition: all 0.25s;
          background: transparent;
          border: 0;
          font-weight: bold;
          color: #20a53a;
          font-size: 18px;
          line-height: $height;
        }
      }

      a:nth-of-type(2) {
        margin-left: 0;
      }
    }
  }
}
</style>
